* {
    margin: 0;
    padding: 0;
    list-style: none;
}

// 展示图放大倍数
@img_change_size:1.1;
//文字上升距离
@text_length:15px;
//箭头颜色
@arrow_color:red;


.out_box {
    margin: 25px auto;
    ul {
        display: flex;
        justify-content: center;
        li {
            margin-right: 30px;
            width: 350px;
            height: 247px;
            overflow: hidden;
            &:hover a .text {
                bottom: @text_length;
            }
            &:hover a img {
                transform: scale(@img_change_size);
            }
            // 黑幕动态
            &:hover a::after {
                background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
            }
            a {
                position: relative;
                display: block;
                // 黑幕
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
                // 展示图
                img {
                    width: 350px;
                    height: 247px;
                    transition: all 0.3s;
                }
                // 内部文字
                .text {
                    position: absolute;
                    bottom: -60px;
                    left: 0px;
                    padding: 20px 30px 20px 30px;
                    transition: all 0.3s;
                    z-index: 1;
                    .title {
                        font-size: 14px;
                        color: #fff;
                        margin-bottom: 10px;
                    }
                    h2 {
                        font-size: 18px;
                        color: #fff;
                        margin-bottom: 59px;
                    }
                    .more {
                        font-size: 14px;
                        color: #fff;
                        // 使用伪元素添加箭头的方式，因为找不到合适的字体而放弃
                        // 宋体的形状很好，但是加粗不太行，因此改用字体图标
                        // &::after {
                        //     content: ">";
                        //     font-family: 宋体;
                        //     font-weight:700;
                        //     color: red;
                        //     margin-left: 10px;
                        // }
                        span {
                            color: @arrow_color;
                            font-weight: 700;
                        }
                    }
                }
            }
        }
    }
}
